<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/24
  Time: 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap-theme.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/style2.css" type="text/css" />
    <style type="text/css">
        a{text-decoration:none;}
    </style>
</head>
<body>
    <div id="main">
        <div class="demo">
            <form id="form">
                <select name="year" class="sel_year" rel="2017">
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                </select>年
                <select name="month" class="sel_month" rel="1">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>月
                <%--<button onclick="clik()">提交</button>--%>
                <a href="javascript:void(0);" class="btn btn-primary" onclick="clik()">提交</a>
            </form>
        </div>
    </div>
    <div id="test" style="height:600px;"></div>
    <div style="display: none;">
        <input value=1 id="flag">
    </div>
    <script type="text/javascript" src="res/jquery.js"></script>
    <script type="text/javascript" src="res/echarts.js"></script>
    <script type="text/javascript" src="res/birthday.js"></script>
    <script>
        $(function () {
//            var xAxisDataJson = [];
//            var seriesDataJson = [];
////            var form = new FormData(document.getElementById("form"));
//            var flag = $("#flag").val();
//            function GetJsonData() {
//                var json = {
//                    "year": $("#year").val(),
//                    "month": $("#month").val()
//                };
//                return json;
//            }
//                $.ajax({
//                    url:"getData?"+$("#form").serialize(),
//                    type:"post",
//                    contentType: "application/json; charset=utf-8",
//                    async:false,
//                    cache: false,
//                    processData: false,
//                    success:function(data){
//                        $("#flag").val(0);
////                $.each(data,function(index,obj){
////                    xAxisDataJson.push(obj.name);
////                    seriesDataJson.push(obj.code);
////                });
//                        for(var i=0;i<data.xAxisData.length;i++){
//                            xAxisDataJson[i] = data.xAxisData[i];
//                            seriesDataJson[i] = data.seriesData[i];
//                        }
//                    }
//                });
//
//                var barData = {
//                    xAxisData:function(){
//                        return xAxisDataJson;
//                    },
//                    seriesData:function(){
//                        return seriesDataJson;
//                    }
//                };
//
//                var myChart = echarts.init(document.getElementById('test'));
//                option = {
//                    color: ['#3398DB'],
//                    tooltip : {
//                        trigger: 'axis',
//                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
//                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//                        }
//                    },
//                    grid: {
//                        left: '3%',
//                        right: '4%',
//                        bottom: '3%',
//                        containLabel: true
//                    },
//                    xAxis : [
//                        {
//                            type : 'category',
//                            data : barData.xAxisData(),
//                            axisTick: {
//                                alignWithLabel: true
//                            }
//                        }
//                    ],
//                    yAxis : [
//                        {
//                            type : 'value'
//                        }
//                    ],
//                    series : [
//                        {
//                            name:'直接访问',
//                            type:'bar',
//                            barWidth: '60%',
//                            data:barData.seriesData()
//                        }
//                    ]
//                };
//
//                myChart.setOption(option);

        clik();


        });



        function clik() {
            var xAxisDataJson = [];
            var seriesDataJson = [];
//            var form = new FormData(document.getElementById("form"));
            var year = $(".sel_year").val();
            var month = $(".sel_month").val();

            $.ajax({
                url:"getData?year="+year+"&month="+month,
                type:"get",
                async:false,
                success:function(data){
                    for(var i=0;i<data.xAxisData.length;i++){
                        xAxisDataJson[i] = data.xAxisData[i];
                        seriesDataJson[i] = data.seriesData[i];
                    }
                }
            });

            var barData = {
                xAxisData:function(){
                    return xAxisDataJson;
                },
                seriesData:function(){
                    return seriesDataJson;
                }
            };

            var myChart = echarts.init(document.getElementById('test'));
            option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        axisLabel:{
                            interval:0,
                            rotate:45,
                            margin:2,
                            textStyle:{
                                color:"#222"
                            }
                        },
                        data : barData.xAxisData(),
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:barData.seriesData()
                    }
                ]
            };

            myChart.setOption(option);
        }


        function upFile(){
            var xAxisDataJson = [];
            var seriesDataJson = [];
            var form = new FormData(document.getElementById("form"));
            $.ajax({
                url:"getData",
                type:"post",
                data:form,
                async:false,
                cache: false,
                processData: false,
                contentType: false,
                success:function(data){
//                $.each(data,function(index,obj){
//                    xAxisDataJson.push(obj.name);
//                    seriesDataJson.push(obj.code);
//                });
                    for(var i=0;i<data.xAxisData.length;i++){
                        xAxisDataJson[i] = data.xAxisData[i];
                        seriesDataJson[i] = data.seriesData[i];
                    }
                }
            });

            var barData = {
                xAxisData:function(){
                    return xAxisDataJson;
                },
                seriesData:function(){
                    return seriesDataJson;
                }
            };

            var myChart = echarts.init(document.getElementById('test'));
            option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : barData.xAxisData(),
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:barData.seriesData()
                    }
                ]
            };

            myChart.setOption(option);
        }

//        if(document.readyState=="complete"){
//            upFile();
//        }
    </script>
</body>
</html>
